<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>找回密码</title>
<link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
<script src="/static/jquery.js"></script>
<script src='/static/bootstrap.js'></script> 
</head>
<body style="background: #ccc;"> 
   <div class="container">
      <div class='row'>
         
         <div class='col-md-4' style="position: fixed;
                  left: 600px;
                  top: 120px;
                  background:    white;
                  padding: 10px;
                  width: 350px;
                 /* display: none;*/
                  border: 2px solid #E0FFFF;
                  border-radius: 15px;">
               <h2 class="text-center">找回密码</h2>
            <form action="{:url('user/findPwd')}" method="post">
               <div class='form-group has-feedback'>
                  <label class='bg-success'><big>申请时邮箱</big></label>
                  <input type='text' class='form-control' name='email'>
                  <p class='help-block' style='color:red;display: none;'>该邮箱不存在</p>
               </div>
               <div class='form-group has-feedback'>
                  <label class='bg-success'><big>点击获取验证码</big></label>
                  <a class="btn btn-success btn-block huoqu" href='javascript:' >获取</a>
               </div>
               <div class='form-group'>
                  <label class='bg-success'><big>验证码</big></label>
                  <input type="text" class='form-control' placeholder="验证码" name='code'>
                  <p class='help-block' style='color:red;display: none;'>验证码不正确</p>
               </div>
               <div class='form-group has-feedback'>
                  <label class='bg-success'><big>新密码</big></label>
                  <input type='password' class='form-control' name='pwd'>
                  <p class='help-block' style='color:red;display: none;'>密码太短</p>
               </div>
               <div class='form-group has-feedback'>
                  <label class='bg-success'><big>重复新密码</big></label>
                  <input type='password' class='form-control' name='repwd'>
                  <p class='help-block' style='color:red;display: none;'>两次密码不一致</p>
               </div>
               <div class='form-group'>
                  <button id='submit' class='btn btn-primary btn-block' style="font-size: 25px;">submit</button>
               </div>     
          </form>
         </div>
      </div>
   </div>
</body>
<script>

//验证邮箱是否存在
$("input[name=email]").blur(function(){
   val=this.value;
   obj=$(this);
   $.post("{:url('user/checkEmail')}",{email:val},function(e){
      if(e==0){
         $("input[name=email]").next().show();
         obj.data({'num':0});
      }else{
         $("input[name=email]").next().hide();
         obj.data({'num':1});
      }
   });
})
//发送验证码
$('.huoqu').click(function(){
   val=$("input[name=email]").val();
   $.post("{:url('user/huoqu')}",{email:val},function(e){
      if(e==0){
         alert('获取失败');
      }else{
         $('.huoqu').html('重新获取');
      }
   });
});
//验证验证码是否正确
$('input[name=code]').blur(function(){
   email=$("input[name=email]").val();
   code=this.value;
   obj=$(this);
   $.post("{:url('user/checkCode')}",{email:email,code:code},function(e){
      if(e==0){
         obj.next().show();
         obj.data({'num':0});
      }else{
         obj.next().hide();
         obj.data({'num':1});
      }
   })
});
//密码长度是否小于6
$('input[name=pwd]').blur(function(){
  val=this.value;
  if(val.length<6){
       $(this).next().show();
       $(this).data({'num':0});
  }else{
     $(this).next().hide();
     $(this).data({'num':1});
  }
 });
 //两次密码是否一致
 $('input[name=repwd]').blur(function(){
  val1=this.value;
  val2=$('input[name=pwd]').val();
  if(val1!=val2){
       $(this).next().show();
       $(this).data({'num':0});
  }else{
     $(this).next().hide();
     $(this).data({'num':1});
  }
 });
//确认提交
$('#submit').click(function(){
   num=0;
   $('input').each(function(){
      num+=$(this).data('num');
   });
   if(num!=4){
      $("input").blur();
      return false;
   }
})
</script>
</script>
</html>